<template>
    <div class="sdy-search-history">
        <div v-if="historyList.length" class="history box">
          <div class="title">
            <span>最近搜索</span>
            <van-icon @click="clearHistoryHandler" class="del" name="delete-o" />
          </div>
          <ul class="content">
            <li
              v-for="item in historyList"
              @click="clickHandler">{{ item }}</li>
              <!-- <li>111</li>
              <li>111</li>
              <li>111</li>
              <li>111</li>
              <li>111</li>
              <li>111</li> -->
          </ul> 
        </div>
        <div class="hot box">
          <div class="title">
            <span>热门搜索</span>
            <span @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}</span>
          </div>
          <ul v-if="isShow" class="content">
            <li
              v-for="item in hotList"
              :key="item.wordid"
              @click="clickHandler"
              >
              {{ item.keyword }}
            </li>
          </ul>
          <div v-else class="hid">
            已经隐藏搜索发现
          </div>
        </div>
      </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

import { hotSearchApi } from '@/api/goods'
import { useRouter, type Router } from 'vue-router'
import type { MyHotSearchItem } from '@/config/interface'
import { onMounted } from 'vue';

const $router: Router = useRouter()


const historyList = ref(JSON.parse(window.localStorage.getItem('history') as string) || [])


const isShow = ref<boolean>(true)


const clickHandler = (e: Event) => {
  const text = (e.target as HTMLElement).innerText


  $router.push({ path: '/list', query: { search: text } })
}

const clearHistoryHandler = () => {

  window.localStorage.removeItem('history')
  historyList.value = []
}




const hotList = ref<MyHotSearchItem[]>([])

// 挂载完毕后请求数据
onMounted(async () => {
  const res = await hotSearchApi()
  hotList.value = res.data
})

</script>
<style scoped lang="scss">
.sdy-search-history {
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
  
    > .box {
      margin-bottom: 30px;
  
      > .title {
        display: flex;
        justify-content: space-between;
  
        .del {
          font-size: 20px;
        }
      }
  
      > ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
  
        > li {
          background-color: #c4c4c4;
          color: #fff;
          padding: 2px 3px;
          margin: 0 2px;
        }
      }
  
      > .hid {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

</style>